*{
    margin: 0px;
    height: 0px;
    list-style: none;
}
.main{
    width:100vw;
    height: 100vh;
    margin: 0 auto;
    background: url(../1.jpg)no-repeat center / 100% 100%;
}
.container{
    width: 1000px;
    height: 80px;
    margin: 0 auto;
    position: relative;
}
.logo{
    width: 210px;
    height: 50px;
    background: url(../img/2.png)no-repeat 0 0 / 100% 100%;
    position: absolute;
    top: 30px;
    float: left;
}
.right{
    width: 600px;
    height: 50px;
    float: right;
    display: flex;
    justify-content: space-between;
    position: absolute;
    right: 0px;
    top: 30px;
    line-height: 60px;
    color: #fff;
    cursor: pointer;
}
.xiao{
    width: 15px;
    height: 15px;
    background: url(../img/4.png)no-repeat 0 0 / 100% 100%;
    position: absolute;
    top:22px;
    right: 38px;
}
.logo-a{
    width: 100px;
    height:0px;
    background: rgba(0, 0 ,0 ,0.6) ;
    overflow: hidden;
    margin-top:-75px;
    transition: 0.2s;
}
.logo-a:hover{
    width: 100px;
    height:180px;
    transition: 0.2s;
}
.logo-b{
    width: 100px;
    height: 120px;
    background: url(../img/3.png)no-repeat 0 0 / 100% 100%;
    margin-top: 70px;
}
.xiao-2{
    width: 10px;
    height: 8px;
    background: url(../img/5.png)no-repeat 0 0 / 100% 100%;
    position: absolute;
    right:8px;
    top: 22px;
}
.logo-a:hover .xiao-2{
    transform: rotate(180deg)
}
.tear{
    width: 1000px;
    height: 450px;
    margin: 0 auto;
}
.tear-a{
    width: 200px;
    height: 400px;
   position: absolute;
    top: 15%;
   left: 45%;
}
.tear-b{
    width: 100%;
    height: 220px;
    background:  url(../img/7.png)no-repeat 0 0 / 100% 100%;
   animation: tear-b 2s 2s  forwards;
}
@keyframes tear-b{
    from{
        transform: translateY(-100px);
        opacity: 1;
    }
    to{
        transform: translateY(0px);
        opacity: 1;
    }
}
.tear-c{
    width: 100%;
    height: 220px;
    background:  url(../img/8.png)no-repeat 0 0 / 100% 100%;
    margin-top: -110px;
}
.tear-d{
    width: 30%;
    height: 100px;
    background:  url(../img/9.png)no-repeat 0 0 / 100% 100%;
    position: absolute;
    top: 80px;
     left: 50px; 
}
.tear-e{
    width: 10px;
    height: 10px;
    float: left;
    margin-top: 30px;
    background:  url(../img/10.png)no-repeat 0 0 / 100% 100%;  
}
.tear-e  {
    animation:tear-e 2s 1s infinite forwards;
}
@keyframes tear-e{
    from{
        transform: translateY(0px);
        opacity: 1;
    }
    to{
        transform: translateY(-100px);
        opacity: 0;
    }
}
.tear-f{
    width: 10px;
    height: 10px;
    float: left;
    margin-top: 30px;
    background:  url(../img/10.png)no-repeat 0 0 / 100% 100%;  
}
.tear-f {
    animation:tear-f 3s 1s infinite forwards;
}
@keyframes tear-f{
    from{
        transform: translateY(0px);
        opacity: 1;
    }
    to{
        transform: translateY(-100px);
        opacity: 0;
    }
}
.tear-g{
    width: 10px;
    height: 10px;
    float: left;
    margin: -20px 20px;
    background:  url(../img/10.png)no-repeat 0 0 / 100% 100%;  
}
.tear-g  {
    animation:tear-g 4s 1s infinite forwards;
}
@keyframes tear-g{
    from{
        transform: translateY(0px);
        opacity: 1;
    }
    to{
        transform: translateY(-100px);
        opacity: 0;
    }
}
.tear-h{
    width: 10px;
    height: 10px;
    float: left;
      margin-top: 30px;
    background:  url(../img/10.png)no-repeat 0 0 / 100% 100%;  
}
.tear-h  {
    animation:tear-h 4s 2s infinite forwards;
}
@keyframes tear-h{
    from{
        transform: translateY(0px);
        opacity: 1;
    }
    to{
        transform: translateY(-100px);
        opacity: 0;
    }
}
.tear-j{
    width: 10px;
    height: 10px;
    float: left;
    margin-top: 30px;
    background:  url(../img/10.png)no-repeat 0 0 / 100% 100%;  
}
.tear-j  {
    animation:tear-j 2s 0.6s infinite forwards;
}
@keyframes tear-j{
    from{
        transform: translateY(0px);
        opacity: 1;
    }
    to{
        transform: translateY(-100px);
        opacity: 0;
    }
}
.tear-k{
    width: 10px;
    height: 10px;
    float: left;
    margin-top: 50px;
    background:  url(../img/10.png)no-repeat 0 0 / 100% 100%;  
}
.tear-k  {
    animation:tear-k 6s 1s infinite forwards;
}
@keyframes tear-k{
    from{
        transform: translateY(0px);
        opacity: 1;
    }
    to{
        transform: translateY(-100px);
        opacity: 0;
    }
}
.teger{
    width: 1000px;
    height:500px;
    margin: 0 auto;
}
.teger-a{
    width: 800px;
    height:200px ;
    background: url(../img/6.png)no-repeat 0 0 / 100% 100%;
    margin: 0 auto;
}
.teger-b{
    width: 600px;
    height:200px ;
    margin: 0 auto;
}
.teger-c{
    width: 250px;
    height: 60px;
    float: left;
    margin-top: 60px;
    background:url(../img/12.png)no-repeat 0 0 / 100% 100%;
}
.teger-d{
    width: 250px;
    height: 60px;
    float: right;
    margin-top: 60px;
    background:url(../img/13.png)no-repeat 0 0 / 100% 100%;
}
  .what{
      width: 100vw;
      height: 100vh;
      background:#fff ;
  }
  .what-a{
      width: 1000px;
      height: 1000px;
      margin: 0 auto;
      position: relative;
  }
  .what-b{
      width: 85%;
      height: 250px;
      background:  url(../img/14.png)no-repeat 0 0 / 100% 100%;
      position: absolute;
      top: 300px;
      left: 100px;
  }
  .what-c{
      width: 500px;
      height: 200px;
      background: url(../img/15.png)no-repeat 0 0 / 100% 100%;
      margin-top: 50px;
      margin-left: 20px;
  }
  .what-d{
    width: 180px;
    height: 90px;
    background: url(../img/16.png)no-repeat 0 0 / 100% 100%;
     position: absolute;
     top: 160px;
     left: 320px;
     transform-origin: top left;
   animation: what-d 2s 1s infinite forwards alternate-reverse;  
}
@keyframes what-d{
    from{
        transform: rotate(0deg);
    }
    to{
        transform: rotate(5deg)
    }
}
.conmon{
    width: 100vw;
      height: 100vh;
      background:#F5F4FC;
}
.conmon-a{
    width: 1000px;
    height: 100%;
    margin: 0 auto;
      position: relative;
}
.conmon-b{
    width: 85%;
    height: 300px;
    background: url(../img/18.png)no-repeat 0 0 / 100% 100%;
    position: absolute;
    top: 300px;
    left: 100px;
}
.conmon-c{
    width: 500px;
    height: 200px;
    background: url(../img/17.png)no-repeat 0 0 / 100% 100%;
    margin-top: 20px;
    margin-left: -20px;
    animation:conmon-c 2s 2s infinite forwards alternate-reverse;
}
@keyframes conmon-c{
     from{
         transform: translateY(0px)
     }
     to{
         transform: translateY(10px)
     }
}
.conmon-d{
    width: 125px;
    height: 100px;
    background: url(../img/19.png)no-repeat 0 0 / 100% 100%;
    margin-top: 20px;
    margin-left: -20px;
    animation:conmon-d 2s 2s infinite forwards alternate-reverse;
}
@keyframes conmon-d{
    from{
        transform: translateX(0px)
    }
    to{
        transform: translateX(10px)
    }
}
.conmon-e{
    width: 125px;
    height: 100px;
    background: url(../img/20.png)no-repeat 0 0 / 100% 100%;
    margin-top: 20px;
    margin-left: -20px;
    position: absolute;
    top: -80px;
    left: 240px;
}
.conmon-f{
    width: 100px;
    height: 60px;
    background: url(../img/21.png)no-repeat 0 0 / 100% 100%;
    margin-top: 20px;
    margin-left: -20px;
    position: absolute;
    top: 150px;
    right: 280px;
}
.solo{
    width: 100vw;
    height: 100vh;
    background:#FEFDFB;
}
.solo-a{
    width: 1000px;
    height: 100%;
    margin: 0 auto;
     position: relative;
}
.solo-b{
    width: 85%;
    height: 300px;
    background: url(../img/23.png)no-repeat 0 0 / 100% 100%;
    position: absolute;
    top: 300px;
    left: 100px;
}
.solo-c{
    width: 240px;
    height: 200px;
    background: url(../img/22.png)no-repeat 0 0 / 100% 100%;
    margin-top: 60px;
    margin-left: 40px;
}
.solo-d{
    width: 150px;
    height: 200px;
    background:  url(../img/24.png)no-repeat 0 0 / 100% 100%;
    position: absolute;
    top: 100px;
    left: 250px;
    transform-origin: left top;  
    animation:solo-d 2s 1s infinite forwards alternate-reverse;
}
@keyframes solo-d{
    from{
        transform: rotate(0deg) 
    }
    to{
        transform: rotate(8deg) 
    }
}
.cert{
    width: 100vw;
    height: 100vh;
    background:#FCFEFD;
}
.cert-a{
    width: 1000px;
    height: 100%;
    margin: 0 auto;
     position: relative;
}
.cert-b{
    width: 85%;
    height: 300px;
    background: url(../img/25.png)no-repeat 0 0 / 100% 100%;
    position: absolute;
    top: 300px;
    left: 100px;
}
.cert-c{
    width: 35px;
    height: 20px;
    background: url(../img/26.png)no-repeat 0 0 / 100% 100%;
    position: absolute;
    transform-origin: left top;  
    bottom: 10px;
    left: 330px;
    animation:cert-c 0.5s 1s infinite forwards alternate-reverse;
}
@keyframes cert-c{
    from{
        transform: rotate(0deg) 
    }
    to{
        transform: rotate(10deg) 
    }
}
.cert-d{
    width: 100px;
    height: 100px;
    position: absolute;
    bottom: 0;
    left: 380px;
}
.cert-f{
    width: 50px;
    height: 50px;
    background: url(../img/31.png)no-repeat 0 0 / 100% 100%;
    position: absolute;
    top: 50px;
    left: 25px;
}

.cert-g{
    width: 50px;
    height: 50px;
    background: url(../img/29.png)no-repeat 0 0 / 100% 100%;
    position: absolute;
    transform-origin:  bottom; 
    top: 5px;
    left:-5px;
    animation:cert-g 2s 1s infinite forwards alternate-reverse;
}
@keyframes cert-g{
    from{
        transform: rotate(0deg) 
    }
    to{
        transform: rotate(10deg) 
    }
}
.cert-h{
    width: 25px;
    height: 50px;
    background: url(../img/28.png)no-repeat 0 0 / 100% 100%;
    position: absolute;
    top: 5px;
    left:35px;
    transform-origin:  bottom; 
    animation:cert-h 2s 1.5s infinite forwards alternate-reverse;
}
@keyframes cert-h{
    from{
        transform: rotate(0deg) 
    }
    to{
        transform: rotate(10deg) 
    }
}
.cert-j{
    width: 50px;
    height: 60px;
    transform-origin:  bottom; 
    animation:cert-j 2s 2s infinite forwards alternate-reverse;
    background: url(../img/27.png)no-repeat 0 0 / 100% 100%;
    position: absolute;
    top: 0;
    left: 60px;
}
@keyframes cert-j{
    from{
        transform: rotate(0deg) 
    }
    to{
        transform: rotate(10deg) 
    }
}